<template>
	<div class="video-play-box">
		<!--我是短视频大赛视频播放页面-->
		<div class="video-box">
			<!--<video poster="none" ref="videoref" src="https://saas-zgyh.oss-cn-shenzhen.aliyuncs.com/record/saas/1409/2020-04-23-19-59-15_2020-04-23-20-34-06.mp4" x5-video-player-fullscreen="true" x5-playsinline webkit-playsinline webkit-playsinline="" playsinline="" controls="controls" width="100%" style="object-fit: fill;">-->
			<video controlslist="nodownload" poster="none" ref="videoref" :src="videoInfo.video" x5-video-player-fullscreen="true" x5-video-player-type='h5-page' webkit-playsinline webkit-playsinline="" playsinline="" width="100%" style="object-fit: fill;">
				<span>您的手机版本，网页版暂未能支持！</span>
			</video>
		</div>
		<div class="close-btn" @click="closeBtn"></div>
		<div class="videoCoverImg" v-if="videoCoverImgIs">
			<img v-if="isLike" class="likeImg" v-show="videoInfo.imgUrl&&videoInfo.imgUrl!=''"  :src="videoInfo.imgUrl+'?'+videoInfo.imgFbl" />
			<img v-else v-show="videoInfo.imgUrl&&videoInfo.imgUrl!=''"  :src="videoInfo.imgUrl+'?'+videoInfo.imgFbl" />
			<div class="palyBtn" @click="clickVideoPlay"></div>
		</div>
		<div class="circle-box">
			<div class="tip-box" :class="isLike?'':'active'" v-if="isTipBox">
			</div>
			<div class="circle1"></div>
			<div class="circle2" @click="clickVote">
				<p class="tp-p">{{isLike?'点赞':'投票'}}</p>
				<p class="ps-p">{{isLike?'点赞数':'票数'}}:{{videoInfo.goods}}</p>
			</div>
		</div>
		<div class="interaction-box">
			<div class="anchor-info">{{videoInfo.title}}</div>
			<div class="footer-box">
				<div class="input-box">
					<div :class="btnSend" @click.stop="sendMsg"></div>
					<input class="bottom-input" type="text" v-model="message" placeholder="想说点什么" />
				</div>				
				<div class="mess-heart-box">
					<div class="left" @click="clickModalSlide()">
						<img src="../../assets/images/message-pic.png" />
						<p>{{videoInfo.pls}}</p>
					</div>
					<div v-if="$source!='entmb'" class="right" @click="showInvite">
						<img src="../../assets/images/share-pic.png" />
						<p>分享</p>
					</div>
				</div>
			</div>
			

		</div>
		<!--邀请卡的游客确认提示框-->
		<invitePop v-if = 'inviteIsShow'  @sendParent = 'receiveMsg'   type='shortVideo'  ></invitePop>
		<LeaveAMessage :class="[LeaveAMessageClass]" v-if="isShow" :cmtAutoCheck='cmtAutoCheck' :commentNum='videoInfo.pls' @slideDown="closeSlide"></LeaveAMessage>
		<div class="invite-card-box" v-if="isInviteBox" @click.stop.prevent="wrapBox($event)">
			<div class="connect-box" ref="connectBox">
				<div class="img-connect">
					<img :class="isLike?'img-poster-like':'img-poster'" :src="videoInfo.imgUrl+'?'+videoInfo.imgFbl" />
					<div class="btn-play"></div>
				</div>
				<div class="invite-title">
					{{videoInfo.title}}
				</div>
				<div class="line"></div>
				<div class="QRcode-box">
					<div class="qr-box">
                        <img :src="qrCodeUrl"/>
					</div>
					<div class="qr-box-tip">
						<div class="sm-p">
							<p>扫描二维码</p>
						</div>
						<p>进入光银直播间</p>
						<img src="../../assets/images/card-logo.png" />
					</div>
				</div>
				<p class="footer-tip">截图保存至相册 邀请好友来观看</p>
			</div>
		</div>
	</div>
</template>

<script>
	require('jr-qrcode');
	import LeaveAMessage from './leaveAMessage.vue';
	import invitePop from  '../../components/invitePop.vue'
	import fun from '../../util/function.js';
	export default {
		components: {
			LeaveAMessage,
			invitePop,//游客进入邀请卡 确认框
		},
		data() {
			return {
				videoCoverImgIs: true,
				LeaveAMessageClass: '',
				message: '', //输入框消息
				btnSend: 'air-box',
				commentList: [], //评论列表数组
				videoInfo: '', //视频信息
				isShow: false,
				isTipBox: true, //投票显示不显示
				cmtAutoCheck: '', //留言需要不需要审核    true 是不需要审核  false 是要审核
				qrCodeUrl:"",//二维码地址
				isInviteBox:false,//二维码显示
				inviteIsShow:false,
				type:'',
				isLike:false,
			}
		},
		created() {
			this.$store.dispatch("hideNav");
			this.getVideoInfo(); //视频信息
			this.showLike(this.$route.query.type);//是否展示喜欢
			this.dotNum('shortVideoPlay_page_'+this.$route.query.id,12)
		},
		mounted() {

		},
		methods: {
			closeBtn() { //返回上一级页面
				this.$router.go(-1)
			},
			dotNum(type,streamType) { //统计
				let _this = this;
				var argumentData = {
					sessionId: type, //场次id
					streamType: streamType, //视频类型：1-预告 2-直播 3-回看 10-全局统计 11-商品点击 12-页面
					actionValue: 1, //行为：1-进入 2-离开 3-点击播放 4-留言 5-点赞 6-关注 7-分享 8-开播 9-关播 10-最高峰值
					playSource: fun.getPlatform(), //微信 app
					url: window.location.href, //当前的url
				};
				_this.$http.post("/h5live/recordData", argumentData, {
						headers: {
							"Content-Type": "application/json"
						}
					})
					.then(
						res => {
						},
						err => {
							console.log(err);
						}
					);
			},
			wrapBox(e){//关闭
				let _this =this
                 var connectBox = _this.$refs.connectBox;
				if(connectBox.contains(e.target)){//里面

				}else{//外面
					this.isInviteBox = false;
				}
		 },
			showInvite(){
				if(this.$store.state.isYk){//游客
					if(window.terminal.hwQuickApp){//华为快应用 直接弹出邀请卡
						this.bulidQRcode()
				        this.isInviteBox = true;
					}else{
						this.inviteIsShow = true		
					}					
				}else{
					this.bulidQRcode()
				    this.isInviteBox = true;
				}
			},
			receiveMsg(data){
				switch (data.type){
					case 'close':
					this.inviteIsShow = false
					this.bulidQRcode()
				    this.isInviteBox = true;
						break;
					default:
						break;
				}
			},
			clickVote() { //点击投票
				if(!this.isLike && this.$store.state.isYk) {//游客
                    if(window.terminal.hwQuickApp){
					    fun.toastMessage('暂未开放')					
					}else{
						fun.goLogin(location.href)
					}
                    return;
               }
				this.isTipBox = false;
				this.$http.get("/svideo/svGoods?id=" + this.$route.query.id)
					.then(res => {
						if(res.data.code === '000000') {
							if(res.data.data) { //防止后端给null
								this.videoInfo.goods++;
							}
						} else if(res.data.code === '100025') {
							if(this.isLike){
								fun.toastMessage('已点赞~', 1500);
							}else{
								fun.toastMessage('今天票数已用尽，明天再来吧~', 1500);
							}
								
							
							
						}
					})
					.catch(response => {
						console.log(response);
					});
			},
			getVideoInfo() { //获取视频播放信息
				this.$http.get("/svideo/getShortVideo?id=" + this.$route.query.id)
					.then(res => {
						if(res.data.code == "000000") {
							if(res.data.code === '000000') {
								if(res.data.data) { //防止后端给null
									this.videoInfo = res.data.data;
									this.cmtAutoCheck = res.data.data.cmtAutoCheck;
								}
							}
						} else {}
					})
					.catch(response => {
						console.log(response);
					});
			},
			sendMsg() {
				 //发送留言
				if(this.$store.state.isYk) {//游客
	                   if(window.terminal.hwQuickApp){
						  fun.toastMessage('暂未开放')					
					   }else{
						  fun.goLogin(location.href)
					   }
                  return;
               }
				if(this.message.length == '0') {
					return
				}
				if(this.message.length > 140) {
					fun.toastMessage('已超出最大字数限制', 1500);
					return;
				}
				let params = {
					'acct': this.$store.state.userInfo.un,
					'msg': this.message,
					'nick': this.$store.state.userInfo.nickname,
					'vid': this.$route.query.id,
					'type':this.isLike ? '2':'1'
				}
				// /svideo/addSvComment 原来接口
				this.$http.post('/svideo/addVideoComment', JSON.stringify(params), {
					headers: {
						"Content-Type": "application/json"
					}
				}).then(
					res => {
						if(res.data.code == "000000") {
							if(this.cmtAutoCheck) { //true 是不需要审核

							} else { //需要审核
								fun.toastMessage('您的评论正在审核中，请耐心等待...', 1500)
							}

						}
					},
					err => {
						console.log("接口错误")
					}
				)
				this.message = ''
			},
			clickVideoPlay() {
				this.videoCoverImgIs = false;
				this.$refs.videoref.play();
			},
			clickModalSlide() {
				 //底部模态框 评论列表
			// 	if(this.$store.state.isYk) {//游客
            //       fun.goLogin(location.href);
            //       return;
            //   }
				this.isShow = true;
				this.LeaveAMessageClass = 'showSlide';
			},
			closeSlide(data) {
				switch(data.type) {
					case 'slideDown':
						this.LeaveAMessageClass = 'hideSlide'
						break;
					default:
						break;
				}
			},
			//生成二维码
			bulidQRcode(){
				let url = ''
				let type = this.$route.query.type
				if(type){
                 url =  window.location.protocol + "//" + window.location.host + "/#/" + this.$channel + "/showReelVideoPlayPage/" + "?id=" + this.$route.query.id+ "&type=" + type +"&mertype=merchantweb&merId=35"
				}else{
                 url =  window.location.protocol + "//" + window.location.host + "/#/" + this.$channel + "/showReelVideoPlayPage/" + "?id=" + this.$route.query.id +"&mertype=merchantweb&merId=35"
				}
				url = config.GD_SHARE_URL_PRE+encodeURIComponent(url)
				let imgBase64 = jrQrcode.getQrBase64(url, {
		          correctLevel: QRErrorCorrectLevel.L,
		        });
				this.qrCodeUrl = imgBase64; //这里是图片url
			},
			//let url = window.location.protocol + "//" + window.location.host + "/#/" + this.$channel + "/live_particulars/" + this.anchor +"/"+this.roomId+ "/liveMsg?fromUn=" + this.$store.state.userInfo.un + "&urlSceneId= "+ this.sceneId+"&mertype=merchantweb&merId=35"
				//this.$lockr.set("ERcode", config.GD_SHARE_URL_PRE+encodeURIComponent(url))
				
		//    是否展示喜欢
		  showLike(type){
            if(type){
				this.isLike = true
			}
		  }		
		},
		watch: {
			//监听底部按钮颜色变化
			message() {
				if(!this.message) {
					this.btnSend = "air-box"
				} else {
					this.btnSend = "air-box-violet"
				}
			},
		}
	}
</script>

<style scoped="scoped">
	.input-box{
		width: 530px;
		height: 123px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-left: 30px;
	}
	.footer-box{
		width: 100vw;
		height: 123px;
		/*background: pink;*/
		position: absolute;
		bottom: 0;
		left: 0;
		border-top: 1px solid  rgba(255,255,255,0.3);
	}
	.btn-play{
		width: 115px;
		height: 115px;
		background: url(../../assets/images/videoPlay-pic.png) no-repeat;
		background-size: 115px 115px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -58px;
		margin-left: -58px;
	}
	.sm-p {
		width: 100%;
		height: 42px;
		/*background: saddlebrown;*/
	}

	.sm-p p {
		float: right;
		position: relative;
	}

	.sm-p p:before {
		content: '';
		width: 0;
		height: 0;
		border: 15px solid;
		border-color: transparent transparent #C5C4C4;
		position: absolute;
		top: 8px;
		left: -40px;
		transform: rotate(270deg);
	}

	.qr-box {
		width: 181px;
		height: 181px;
		/*	background: darkgray;*/
		float: left;
	}
	.qr-box img{
		width: 181px;
		height: 181px;
	}
	.QRcode-box {
		width: 440px;
		height: 190px;
		/*background: seagreen;*/
		margin: 35px auto 0;
	}

	.qr-box-tip {
		width: 188px;
		height: 181px;
		/*background: pink;*/
		float: right;
		color: #C5C4C4;
		font-size: 26px;
	}

	.qr-box-tip p {
		text-align: right;
		line-height: 42px;
	}

	.qr-box-tip img {
		width: 137px;
		height: 71px;
		float: right;
		margin-top: 22px;
	}

	.footer-tip {
		display: block;
		font-size: 22px;
		font-weight: 400;
		color: rgba(139, 139, 139, 1);
		line-height: 42px;
		margin: 24px auto 0;
		text-align: center;
	}

	.line {
		width: 440px;
		border-top: 1px solid rgba(243, 243, 243, 1);
		margin: 30px auto 0;
	}

	.invite-title {
		width: 440px;
		max-height: 84px;
		line-height: 42px;
		/* background: pink;*/
		margin: 20px auto 0;
		color: #8B8B8B;
		font-size: 26px;
		text-align: justify;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.invite-card-box {
		width: 100vw;
		height: 100vh;
		/*background: rgba(0,0,0,0.3);*/
		/*background: pink;*/
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(0,0,0,.6);
	}

	.connect-box {
		width: 610px;
		height: 1053px;
		background: rgba(255, 255, 255, 1);
		border-radius: 12px;
		/*display: flex;
		justify-content: center;*/
		/*flex-direction: column;*/
	}

	.img-connect {
		width: 440px;
		height: 551px;
		margin: 65px auto 0;
		position: relative;
		/* background: black; */
	}

	.img-poster {
		height: 100%;
		width: 100%;
		display: block;
		-o-object-fit: cover;
		object-fit: cover;
	}

.img-poster-like{
	height: auto;
	width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

	.cha {
		color: white;
		font-size: 34px;
	}

	.close-btn {
		width: 100px;
		height: 80px;
		position: absolute;
		top: 40px;
		right: 0;
		/*background: pink;*/
		z-index: 10;
		display: flex;
		justify-content: center;
		align-items: center;
		background: url(../../assets/images/video-click-pic.png) no-repeat center center;
		background-size: 55px 55px;
	}

	.circle-box {
		width: 200px;
		height: 200px;
		/*background: darkblue;*/
		position: absolute;
		bottom: 320px;
		right: 5px;
		z-index: 10;
	}

	.circle2 {
		width: 140px;
		height: 140px;
		background: linear-gradient(-90deg, rgba(207, 0, 181, 1), rgba(154, 0, 196, 1));
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -70px;
		margin-left: -70px;
		/*animation: myfirst1 6s linear infinite;*/
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		color: white;
	}

	.tp-p {
		 font-size: 32px;
		font-weight: 800;
		margin-bottom: 17px;
	}

	.ps-p {
		font-size: 24px;
		font-weight: 500;
		transform: scale(0.8);
	}

	.circle1 {
		width: 160px;
		height: 160px;
		border-radius: 50%;
		background: rgba(154, 0, 196, 0.4);
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -80px;
		margin-left: -80px;
		animation: myfirst 2s infinite
	}

	@keyframes myfirst {
		0% {
			transform: scale(1.1, 1.1);
			opacity: 0.7;
		}
		50% {
			transform: scale(0.8, 0.8);
			opacity: 1;
		}
		100% {
			transform: scale(1.1, 1.1);
			opacity: 0.7;
		}
	}
	/*@keyframes myfirst1{
	0%{
		transform: rotate(0deg);
	}
	50%{
		transform: rotate(180deg);
	}
	100%{
		transform: rotate(360deg);
	}
}*/

	.air-box {
		width: 65px;
		height: 65px;
		position: absolute;
		top: 27px;
		right: 270px;
		z-index: 10;
		background: url(../../assets/images/airplane-gray.png) no-repeat center center;
		background-size: 35px 35px;
		/*background: pink;*/
	}

	.air-box-violet {
		width: 65px;
		height: 65px;
		/*	background: pink;*/
		position: absolute;
		top: 27px;
		right: 270px;
		z-index: 10;
		background: url(../../assets/images/airplane-violet.png) no-repeat center center;
		background-size: 35px 35px;
		/*background: pink;*/
	}

	.showSlide {
		animation: showSlideAnimate 0.5s cubic-bezier(0.32, 0.43, 0.45, 0.94) 1 forwards;
	}

	@keyframes showSlideAnimate {
		from {
			transform: translateY(0px);
		}
		to {
			transform: translateY(-1019px);
		}
	}

	.hideSlide {
		animation: hideSlideAnimate 0.5s cubic-bezier(0.47, 0.24, 0.4, 0.97) 1 forwards;
	}

	@keyframes hideSlideAnimate {
		from {
			transform: translateY(-1019px);
		}
		to {
			transform: translateY(0px);
		}
	}

	.video-play-box {
		width: 100vw;
		height: 100vh;
		background: black;
		overflow: hidden;
	}

	.video-box {
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	video {
		/*width: 100%;
		height: 100%;*/
		/*display: block;*/
		object-fit: fill;
	}

	.videoCoverImg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.videoCoverImg img {
		height: 100%;
		width: 100%;
		display: block;
		object-fit: cover;
	}
	.videoCoverImg .likeImg{
		height: auto;
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		margin: auto;
	}
	.palyBtn {
		width: 115px;
		height: 115px;
		background: url(../../assets/images/videoPlay-pic.png) no-repeat;
		background-size: 115px 115px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -57.5px;
		margin-left: -57.5px;
	}

	.interaction-box {
		width: 100vw;
		height: 360px;
		/*background: pink;*/
		position: absolute;
		left: 0;
		bottom: 0;
		background:linear-gradient(0deg,rgba(0,0,0,0.5) 0%,rgba(204,204,204,0) 100%);
	}

	.bottom-input {
		width: 459px;
		height: 66px;
	/*	line-height: 66px;*/
		background: rgba(0, 0, 0, 0.3);
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28px;
		padding: 0 70px 0 30px;
		color: #FFFEFE;
	}
		input::-webkit-input-placeholder {
	        height: 36px;
	        line-height :36px;
	        color: #FFFEFE;
     }
	.anchor-info {
		width: 518px;
		/*background: saddlebrown;*/
		position: absolute;
		bottom: 158px;
		left: 30px;
		text-align: justify;
		font-size: 26px;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 42px;
	}

	.mess-heart-box {
		width: 220px;
		height: 123px;
		/*background: darkcyan;*/
		position: absolute;
		bottom: 2px;
		right: 0px;
		display: flex;
		color: white;
		font-size: 24px;
	}

	.mess-heart-box img {
		width: 45px;
		margin-bottom: 10px;
	}

	.mess-heart-box .left {
		/*background: goldenrod;*/
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.mess-heart-box .right {
		/*background: bisque;*/
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.tip-box {
		width: 140px;
		height: 59px;
		/*background: darkcyan;*/
		
		background-size: 140px 59px;
		position: absolute;
		bottom: 195px;
		right: 35px;
	}
	.tip-box.active{
		background: url(../../assets/images/toupiao.png) no-repeat;
		background-size: 140px 59px;
	}
</style>
